<template>
  <el-dialog
    class="met-dialog"
    :title="title"
    width="1100px"
    :visible.sync="visible"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <div class="addcustomer">
      <div v-if="step == 1" class="type1">
        <div class="top border">
          <div class="title">客户类型组</div>
          <div class="content">
            <el-radio
              v-for="(item, index) of dict.type.category_id"
              :key="index + 'g'"
              v-model="formline.categoryId"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </div>
        </div>
        <div class="bottom border">
          <div class="title">客户类型</div>
          <div class="content">
            <el-radio
              v-for="(item, index) of dict.type[formline.categoryId]"
              :key="index + 's'"
              v-model="formline.subCategoryId"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </div>
        </div>
      </div>
      <div v-if="step == 2">
        <div class="type2" v-if="formline.categoryId == 'unit'">
          <div class="type2-title">客户基本信息</div>
          <div class="row">
            <div class="col">
              <div class="label">
                <span class="red-icon">* </span>客户编号：
              </div>
              <div class="value">{{ formline.customerNo || "自动编号" }}</div>
            </div>
            <div class="col">
              <div class="label"><span class="red-icon">*</span>客户类型</div>
              <div class="value">
                <el-select
                  v-model="formline.subCategoryId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dict.type[formline.categoryId] || []"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label"><span class="red-icon">*</span>客户全称：</div>
              <div class="value">
                <el-input v-model="formline.customerName"></el-input>
                <!-- <el-button
                  @click="checkName"
                  :disabled="!formline.customerName"
                  size="mini"
                  >检测</el-button
                > -->
              </div>
            </div>
            <div class="col">
              <div class="label">
                <span class="red-icon">*</span
                >{{
                  formline.categoryId == "unit" ? "统一信用代码" : "身份证号码:"
                }}
              </div>
              <div class="value">
                <el-input
                  v-model="formline.idCard"
                  @blur="checkIdCard"
                ></el-input>
                <!-- <el-button @click="checkName" :disabled="!formline.customerName"
                  >检测</el-button
                > -->
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">服务团队：</div>
              <div class="value">
                <el-input v-model="formline.serviceGroupName"></el-input>
                <!-- {{ formline.serviceGroupName
                }}<el-button @click="chose('deparentModal')" size="mini"
                  >选</el-button
                > -->
              </div>
            </div>
            <div class="col">
              <div class="label">
                <span class="red-icon">* </span>客户负责律师
              </div>
              <div class="value">
                <el-input v-model="formline.lawyerName"></el-input>
                <!-- {{ formline.lawyerName }}
                <el-button @click="chose('userModalVue')" size="mini"
                  >选</el-button
                > -->
              </div>
            </div>
            <div class="col">
              <div class="label">客户来源</div>
              <div class="value">
                <el-input v-model="formline.state"></el-input>
                <!-- <el-select v-model="formline.state" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.customer_origin"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
            </div>
          </div>
          <!-- <div class="row">
            <div class="col">
              <div class="label">关联单位：</div>
              <div class="colfelx">
                <div class="type2-title left">
                  <el-button
                    icon="el-icon-plus"
                    size="mini"
                    type="primary"
                    @click="onadd(2)"
                    >新增</el-button
                  >
                  <el-button
                    icon="el-icon-finished"
                    size="mini"
                    @click="chose('customerModalVue')"
                    >从客户中选择</el-button
                  >
                  <el-button
                    icon="el-icon-delete
"
                    size="mini"
                    @click="onclear(1)"
                    >清空</el-button
                  >
                </div>
                <el-table
                  :data="formline.associatedUnits"
                  style="width: 100%"
                  border
                  class="primary-table"
                >
                  <el-table-column
                    prop="createTime"
                    label="日期"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" align="center">
                    <template slot-scope="scope">
                      <el-input
                        class="w90"
                        v-model="formline.associatedUnits[scope.$index].name"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="地址" align="center">
                    <template slot-scope="scope">
                      <el-input
                        class="w90"
                        v-model="formline.associatedUnits[scope.$index].address"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div> -->
          <div class="row">
            <div class="label">简介：</div>
            <div class="value">
              <el-input
                v-model="formline.introduction"
                placeholder="请填写客户简介"
                :autosize="{ minRows: 3, maxRows: 3 }"
                type="textarea"
              >
              </el-input>
            </div>
          </div>
          <div class="type2-title">单位信息</div>
          <div class="row">
            <!-- <div class="col">
              <div class="label">统一社会信用代码：</div>
              <div class="value">
                <el-input v-model="formline.idType"> </el-input>
              </div>
            </div> -->
            <div class="col felx0">
              <div class="label">法人代表/负责人：</div>
              <div class="value">
                <el-input v-model="formline.legalPerson"> </el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">单位传真：</div>
              <div class="value">
                <el-input v-model="formline.fax"> </el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">单位电话：</div>
              <div class="value">
                <el-input v-model="formline.tel"> </el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">单位地址：</div>
              <div class="value">
                <el-input v-model="formline.address"> </el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">邮编：</div>
              <div class="value">
                <el-input v-model="formline.postCode"> </el-input>
              </div>
            </div>
          </div>
          <div class="row-right">
            <div class="col felx0">
              <div class="label">开户行：</div>
              <div class="value">
                <el-input v-model="formline.bankName" class="w190"> </el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">银行账号：</div>
              <div class="value">
                <el-input v-model="formline.bankAccount"> </el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">所属地区：</div>
              <div class="value">
                <el-select v-model="formline.region" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.customer_region"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="col">
              <div class="label">人员规模：</div>
              <div class="value">
                <el-select v-model="formline.scale" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.company_scale"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="col">
              <div class="label">单位网址：</div>
              <div class="value">
                <el-input v-model="formline.text"> </el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">所属行业：</div>
              <div class="value">
                <el-select v-model="formline.industry" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.customer_industry"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="col">
              <div class="label">注册资本(万元)：</div>
              <div class="value">
                <el-input v-model="formline.registeredCapital"> </el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">年营业额(万元)：</div>
              <div class="value">
                <el-input v-model="formline.annualTurnover"> </el-input>
              </div>
            </div>
          </div>
          <div class="type2-title">联系人</div>
          <div class="colfelx">
            <div class="type2-title left">
              <el-button
                icon="el-icon-plus"
                size="mini"
                type="primary"
                @click="onadd(1)"
                >新增</el-button
              >
              <el-button icon="el-icon-delete" @click="onclear(2)" size="mini"
                >清空</el-button
              >
            </div>
            <el-table
              :data="formline.linkmen"
              style="width: 100%"
              border
              class="primary-table"
            >
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].name"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="deptName"
                label="部门"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].deptName"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="jobTitle"
                label="职务"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].jobTitle"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="手机"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].mobile"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="tel"
                label="固话"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].tel"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="email"
                label="Email"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].email"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="qq" label="QQ" align="center" width="120">
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].qq"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="ageRange"
                label="年龄范围"
                align="center"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].ageRange"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="socialRelationships"
                label="社会关系"
                align="center"
              >
                <template slot-scope="scope">
                  <el-input
                    class="w90"
                    v-model="formline.linkmen[scope.$index].socialRelationships"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="type2" v-else>
          <div class="type2-title">客户基本信息</div>
          <div class="row">
            <div class="col">
              <div class="label">
                <span class="red-icon">* </span>客户编号：
              </div>
              <div class="value">自动编号</div>
            </div>
            <div class="col">
              <div class="label"><span class="red-icon">*</span>客户类型</div>
              <div class="value">
                <el-select
                  v-model="formline.subCategoryId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dict.type[formline.categoryId || 'person']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label"><span class="red-icon">*</span>客户全称：</div>
              <div class="value">
                <el-input v-model="formline.customerName"></el-input>
                <!-- <el-button @click="checkName" :disabled="!formline.customerName"
                  >检测</el-button
                > -->
              </div>
            </div>
            <div class="col">
              <div class="label">
                <span class="red-icon">*</span
                >{{
                  formline.categoryId == "unit" ? "统一信用代码" : "身份证号码:"
                }}
              </div>
              <div class="value">
                <el-input
                  v-model="formline.idCard"
                  @blur="checkIdCard"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">服务团队：</div>
              <div class="value">
                <el-input v-model="formline.serviceGroupName"></el-input>
                <!-- @click="chose('deparentModal')" -->
                <!-- {{ formline.serviceGroupName }}
                <el-button @click="chose('deparentModal')">选</el-button> -->
              </div>
            </div>
            <div class="col">
              <div class="label">
                <span class="red-icon">* </span>客户负责律师
              </div>
              <div class="value">
                <el-input v-model="formline.lawyerName"></el-input>
                <!-- {{ formline.lawyerName }}
                <el-button @click="chose('userModalVue')" type="primary"
                  >选</el-button
                > -->
              </div>
            </div>
            <div class="col">
              <div class="label">客户来源</div>
              <div class="value">
                <el-input v-model="formline.state"></el-input>
                <!-- <el-select v-model="formline.state" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.customer_origin"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
            </div>
          </div>
          <div class="type2-title">联系信息</div>
          <div class="row">
            <div class="col">
              <div class="label">手机：</div>
              <div class="value">
                <el-input v-model="formline.mobile"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">固话：</div>
              <div class="value">
                <el-input v-model="formline.telphone"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">Email:</div>
              <div class="value">
                <el-input v-model="formline.email"></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">微信号：</div>
              <div class="value">
                <el-input v-model="formline.wechat"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">QQ：</div>
              <div class="value">
                <el-input v-model="formline.qq"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">邮编:</div>
              <div class="value">
                <el-input v-model="formline.postCode"></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">通信地址:</div>
              <div class="value">
                <el-input v-model="formline.address"></el-input>
              </div>
            </div>
          </div>
          <div class="type2-title">详细信息</div>
          <div class="row">
            <div class="col">
              <div class="label">性别：</div>
              <div class="value" style="width: 213px">
                <el-radio-group v-model="formline.gender">
                  <el-radio
                    v-for="item in dict.type.sys_user_sex || []"
                    :key="item.value + 'sex'"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                  <!-- <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                  <el-radio :label="2">未知</el-radio> -->
                </el-radio-group>
              </div>
            </div>
            <div class="col">
              <div class="label">出生日期：</div>
              <div class="value">
                <el-date-picker
                  v-model="formline.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="col">
              <div class="label">婚姻状况:</div>
              <div class="value">
                <el-select
                  v-model="formline.maritalStatus"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dict.type.marital_status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col felx0">
              <div class="label">证件类型：</div>
              <div class="value">
                <el-select
                  v-model="formline.idType"
                  placeholder="请选择"
                  class="w200"
                >
                  <el-option
                    v-for="item in dict.type.id_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="col felx0">
              <div class="label">证件号码：</div>
              <div class="value">
                <el-input v-model="formline.idNo" class="w200"></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">国籍:</div>
              <div class="value">
                <el-select v-model="formline.nationality" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.basic_country"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="col">
              <div class="label">民族：</div>
              <div class="value">
                <el-input v-model="formline.ethnicity"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">籍贯:</div>
              <div class="value">
                <el-input v-model="formline.originPlace"></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">开户行:</div>
              <div class="value">
                <el-input v-model="formline.bankName" class="w300"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">银行账号:</div>
              <div class="value">
                <el-input
                  v-model="formline.bankAccount"
                  class="w300"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">工作单位:</div>
              <div class="value">
                <el-input v-model="formline.company" class="w300"></el-input>
              </div>
            </div>
            <div class="col">
              <div class="label">工作单位地址：</div>
              <div class="value">
                <el-input
                  v-model="formline.companyAddress"
                  class="w300"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">社会关系:</div>
              <div class="value">
                <el-input
                  v-model="formline.socialRelations"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="type2-title">其他联系人</div>

          <div class="row">
            <div class="col">
              <div class="colfelx">
                <div class="type2-title left">
                  <el-button icon="el-icon-plus" size="mini" @click="onadd(1)"
                    >新增</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    @click="onclear(2)"
                    >清空</el-button
                  >
                </div>
                <el-table
                  :data="formline.linkmen"
                  style="width: 100%"
                  border
                  class="primary-table"
                >
                  <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                    width="170"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].name"
                        class="w130"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="手机"
                    align="center"
                    width="170"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].mobile"
                        class="w130"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="tel"
                    label="固话"
                    align="center"
                    width="170"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].tel"
                        class="w130"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="Email"
                    width="170"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].email"
                        class="w130"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    width="170"
                    label="QQ"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].qq"
                        class="w130"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model="formline.linkmen[scope.$index].remark"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="type2">
          <div class="type2-title">其他信息</div>
          <div class="row">
            <div class="col">
              <div class="label">备注</div>
              <div class="value">
                <el-input
                  v-model="formline.remark"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  type="textarea"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">附件:</div>
              <div class="colfelx">
                <div class="type2-title left">
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    multiple
                    :show-file-list="false"
                    :on-success="successUpload"
                    :headers="headers"
                  >
                    <el-button size="mini" type="primary">新增</el-button>
                  </el-upload>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    @click="onclear(3)"
                    >清空</el-button
                  >
                  {{
                    formline.categoryId == "unit"
                      ? "请上传组织结构图等单位相关的证照。"
                      : "请添加身份证、护照扫描等个人相关的证照。"
                  }}
                </div>
                <el-table
                  :data="formline.attachments"
                  style="width: 100%"
                  border
                  class="primary-table"
                >
                  <el-table-column
                    prop="filename"
                    label="文件"
                    align="center"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="size"
                    label="大小"
                    align="center"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="上传日期"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>

          <!-- <div class="row">
            <div class="col">
              <div class="label">审核人员</div>
              <div class="value">
                <el-select
                  multiple
                  class="w500"
                  v-model="formline.reviewers"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">抄送</div>
              <div class="value">
                <el-select
                  multiple
                  class="w500"
                  v-model="formline.makeList"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="foot">
      <el-button @click="next" v-if="step == 1" size="mini" type="primary"
        >下一步</el-button
      >
      <el-button @click="submit" v-else size="mini" type="primary"
        >完成</el-button
      >
      <el-button @click="cancle" size="mini">取消</el-button>
    </div>
    <!-- </div> -->
    <userModalVue ref="userModalVue" @submit="userSubmit" />
    <deparentModal ref="deparentModal" @submit="deparentSubmit" />
    <customerModalVue ref="customerModalVue" @submit="customerSubmit" />
  </el-dialog>
</template>

<script>
import userModalVue from "./userModal.vue";
import deparentModal from "./deparentModal";
import { getAllUser } from "@/api/met";
import { getToken } from "@/utils/auth";
import {
  addcustomer,
  checkcustomer,
  categorytree,
  getcustomer,
  updatacustomer,
} from "@/api/case/case";
import moment from "moment";
import customerModalVue from "../caseManage/customerModal.vue";
export default {
  components: { userModalVue, deparentModal, customerModalVue },
  dicts: [
    "customer_region",
    "marital_status",
    "basic_country",
    "company_scale",
    "customer_origin",
    "id_type",
    "category_id",
    "unit",
    "person",
    "customer_industry",
    "sys_user_sex",
    "sys_carage_type",
    "sys_carage_type_1",
    "sys_carage_type_2",
    "sys_carage_type_3",
    "sys_carage_type_4",
    "sys_carage_type_6",
    "sys_carage_type_9",
    "sys_carage_type_10",
    "sys_carage_type_10_hasson_1",
    "sys_carage_type_6_1_hasson",
    "sys_carage_type_11",
    "sys_carage_type_6_2",
    "sys_carage_type_6_4",
    "sys_carage_type_10_2",
    "sys_carage_type_1_2", // 民事诉讼-债权
    "sys_carage_type_1_3", // 民事诉讼-知识产权纠纷
    "sys_carage_type_1_4", // 民事诉讼-婚姻家庭纠纷
    "sys_carage_type_1_5", // 民事诉讼-商事纠纷
  ],
  data() {
    return {
      userList: [],
      isAdd: true, //是添加
      visible: false,
      firscategoryId: "",
      title: "新增客户",
      formline: {
        reviewers: [],
        categoryId: "",
        text: "",
        lawyerId: "", //客户律师id
        lawyerName: "", //客户律师名称
        attachments: [],
        linkmen: [],
        associatedUnits: [],
        serviceGroupId: "", //服务团队id
        serviceGroupName: "", //服务团队名称
        subCategoryId: "", //子分类
        categoryId: "", //客户分类
        idCard: "",
      },
      headers: { Authorization: "Bearer " + getToken() },
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      options2: [
        { value: 1, label: "企业法人" },
        { value: 2, label: "自然人客户类型" },
      ], //type2科技；类型
      step: 1, //当前步骤
      type: "",
      typegrounp: [
        //客户类型组数组
        { value: 116, label: "单位组织客户类型" },
        { value: 2, label: "自然人客户类型" },
      ],
      rules: {
        customerName: [
          { required: true, message: "请输入客户全称", trigger: "change" },
        ],
        status: [
          // { required: true, message: "请选择客户来源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  watch: {
    visible(newval) {
      if (!newval) {
        Object.assign(this.$data, this.$options.data());
      }
    },
    "dict.type.category_id"(val) {
      this.formline.categoryId = val[0]?.value;
    },
    "formline.categoryId"(newvale) {
      let visible = this.visible;
      // Object.assign(this.$data.formline, this.$options.data().formline);
      if (this.isAdd) {
        this.formline.subCategoryId = "";
      }

      // this.formline.categoryId = newvale;
    },
  },
  computed: {},
  created() {},
  methods: {
    getAllUser() {
      getAllUser().then((res) => {
        this.userList = res.data;
      });
    },
    //打开弹窗
    async open(row) {
      console.log(row);
      this.getAllUser();
      categorytree().then((res) => {
        console.log(res);
      });
      if (row && !row.customerId) {
        this.step = 1;
        this.title = "新增客户";
        Object.assign(this.$data.formline, this.$options.data().formline);
        this.formline.categoryId = this.dict.type.category_id[0]?.value;
        this.isAdd = true;
        this.visible = true;
      } else {
        this.step = 2;
        this.title = "编辑客户";
        this.isAdd = false;
        getcustomer(row.customerId).then((res) => {
          console.log(res.data);
          this.formline = res.data;
          this.formline.subCategoryId = String(
            this.formline.subCategoryId || ""
          );
        });
        console.log(this.userList);
        this.visible = true;
      }
    },
    //客户名称检测
    checkName() {
      checkcustomer({
        customerId: "",
        customerName: this.formline.customerName,
      })
        .then((res) => {
          console.log(res);
          if (res.data) {
            this.$message.success("检测通过！");
          } else {
            this.$message.success("检测未通过！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    chose(refname) {
      this.$refs[refname].open();
    },
    //客户律师弹窗
    userSubmit(val) {
      console.log(val);
      this.$set(this.formline, "lawyerId", val.userId);
      this.$set(this.formline, "lawyerName", val.userName);
    },
    //服务团队弹窗
    deparentSubmit(val) {
      this.$set(this.formline, "serviceGroupId", val.deptId);
      this.$set(this.formline, "serviceGroupName", val.deptName);
    },
    //关联单位客户弹窗
    customerSubmit(val) {
      if (val) {
        this.formline.associatedUnits.push({
          name: val.customerName,
          createTime: val.date || moment().format("yyyy-MM-DD HH:mm:ss"),
          address: val.address,
          ...val,
        });
      }
    },
    successUpload(response, file, fileList) {
      //合同上传成功
      console.log("上传成功", response, file, fileList);
      this.formline.attachments.push({
        filename: file.name,
        size: file.size,
        remark: "",

        createTime: moment().format("yyyy-MM-DD HH:mm:ss"),
        url: response.url,
        mimeType: file.name.split(".")[1],
      });
    },
    //下一步
    next() {
      if (!this.formline.categoryId) {
        this.$message.warning("请先选择客户类型组");
      } else if (!this.formline.subCategoryId) {
        this.$message.warning("请先选择客户类型");
      } else {
        this.step++;
      }
    },
    checkIdCard() {
      if (this.formline.categoryId == "unit") return true;
      if (!this.formline.idCard) return false;
      let p =
        /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
      let isRead = p.test(this.formline.idCard);
      if (!isRead) {
        this.$message.warning("请输入正确身份证号码");
      }
      return isRead;
    },
    //完成
    submit() {
      let re = new RegExp("^[ ]+$");
      if (!this.formline.customerName) {
        this.$message.warning("请输入客户全称!");
        return;
      } else if (!this.formline.idCard) {
        this.$message.warning(
          `请输入${
            this.formline.categoryId == "unit" ? "统一信用代码" : "身份证号码:"
          }`
        );
        return;
      } else if (!this.formline.categoryId) {
        this.$message.warning("请选择客户类型!");
        return;
      } else if (!this.formline.lawyerName) {
        this.$message.warning("请选择客户负责律师!");
        return;
      }
      // else if (!this.formline.mobile || !this.formline.linkmen?.length) {
      //   this.$message.warning("请填写其他联系人!");
      //   return;
      // }
      console.log("2222222", this.checkIdCard());
      if (!this.checkIdCard() && this.formline.categoryId != "unit") return;
      if (this.isAdd) {
        addcustomer({ ...this.formline }).then((res) => {
          console.log(res);
          this.$emit("submit", { ...this.formline, customerId: res.data });
          this.$message.success("添加成功！");
          this.visible = false;
        });
      } else {
        updatacustomer({ ...this.formline, auditStatus: 0 }).then((res) => {
          console.log(res);
          this.$emit("submit", this.formline);
          this.$message.success("修改成功！");
          this.visible = false;
        });
      }
    },
    //添加表格
    onadd(type) {
      if (type == 1) {
        this.formline.linkmen.push({
          name: "",
          deptName: "",
          remark: "",
          mobile: "",
          jobTitle: "",
          tel: "",
          email: "",
          qq: "",
          ageRange: "",
          socialRelationships: "",
        });
      } else if (type == 2) {
        this.formline.associatedUnits.push({
          name: "",
          createTime: moment().format("yyyy-MM-DD HH:mm:ss"),
          address: "",
        });
      }
    },
    //清空数组
    onclear(type) {
      if (type == 1) {
        this.$set(this.formline, "associatedUnits", []);
      } else if (type == 2) {
        this.$set(this.formline, "linkmen", []);
      } else {
        this.$set(this.formline, "attachments", []);
      }
    },
    cancle() {
      this.step = 1;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
$--color-titlebg: #f6f9fd; /* 表格标题背景颜色 */
$--color-border: #e9eef5; /* 边框颜色 */
$--color-labelbg: #f6f9fe; /* label北京颜色 */
.met-dialog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.addcustomer {
  // height: 70vh;
  min-height: 500px;
  height: calc(100% - 65px);
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .border {
    border: 2px solid rgb(173, 169, 169);
    border-image-source: linear-gradient(55deg, #c5c7d1, #6f79cb);
    border-image-slice: 1;
    border-image-repeat: stretch;
    padding: 30px 20px;
    position: relative;
    border-radius: 3px;
    margin-bottom: 30px;
    margin: 30px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: -10px;
    background: white;
    padding: 0px 5px;
  }
}
.type1 {
  margin-top: 20px;
  height: calc(100% - 65px);
}
.foot {
  text-align: right;
  margin-top: 20px;
  margin-right: 50px;
  // position: absolute;
  // bottom: 30px;
  // right: 20px;
}
.type2 {
  &-title {
    text-align: center;
    background: $--color-titlebg;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
  }
  .row {
    display: flex;
  }
  .row-right {
    display: flex;
    justify-content: left;
  }
  .col {
    flex: auto;
    display: flex;
    flex: 1;
  }
  .label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding: 5px 5px;
    border: 1px solid $--color-border;
    background: $--color-labelbg;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .felx0 {
    flex: 0 0 auto;
    .value {
      width: 215px;
    }
  }
  .red-icon {
    color: red;
    margin-right: 2px;
    position: relative;
    top: 3px;
  }
  .value {
    display: inline-block;
    border: 1px solid $--color-border;
    padding: 5px 5px;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .colfelx {
    border: 1px solid $--color-border;
    flex: 1;
  }
  .left {
    text-align: left;
  }
  .upload-demo {
    display: inline-block;
    margin-right: 10px;
    border-radius: 20px;
  }
}

::v-deep .primary-table.el-table .el-table__header-wrapper th {
  background: #eaf3ff;
  height: 30px;
}
::v-deep .primary-table .el-table--medium .el-table__cell {
  padding: 5px -px;
}
::v-deep .type2 .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
::v-deep .type2 .el-input--medium .el-input__icon {
  line-height: 30px;
}
::v-deep .type2 .w190.el-input.el-input--medium {
  width: 190px;
}
::v-deep .type2 .el-input.el-input--medium {
  width: 200px;
}
::v-deep .type2 .w90.el-input.el-input--medium {
  width: 100%;
}
::v-deep .type2 .w130.el-input.el-input--medium {
  width: 130px;
}
::v-deep .type2 .w150.el-input.el-input--medium {
  width: 150px;
}
::v-deep .type2 .w300.el-input.el-input--medium {
  width: 300px;
}

::v-deep .w500.el-input.el-input--medium.el-input--suffix {
  width: 500px;
}
::v-deep .el-select.w500.el-select--medium input.el-input__inner {
  width: 500px !important;
}
::v-deep .type2 .w500 .el-input.el-input--medium {
  width: 500px;
}
::v-deep .el-dialog__body {
  padding: 0px;
  height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
}
</style>
